<template>
  <div class="step1">
    {{ selectedStudent }}
    <div>
      <el-form
        ref="selectedStudent"
        :model="selectedStudent"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="身份证号" prop="ID">
          <el-input
            type="text"
            placeholder="请输入学号"
            v-model="selectedStudent.ID"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input
            type="text"
            placeholder="请输入姓名"
            v-model="selectedStudent.name"
          />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="selectedStudent.gender">
            <el-radio label="male">男</el-radio>
            <el-radio label="female">女</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  name: "step1",
  data() {
    return {
      rules: {
        name: [
          { required: true, message: "姓名不可为空", trigger: "blur" },
          { min: 2, max: 5, message: "长度在 2 到 5 个字符", trigger: "blur" },
        ],
        // ID: [
        //   { required: true, message: "学号不可为空", trigger: "blur" },
        //   {
        //     min: 5,
        //     max: 15,
        //     message: "长度在 8 到 12 个字符",
        //     trigger: "blur",
        //   },
        // ],
        gender: [{ required: true, message: "请选择性别", trigger: "change" }],
      },
    };
  },
  methods: {},
  computed: {
    ...mapState({
      student: "getstudents",
    }),
    ...mapGetters(["selectedStudent"]),
  },
};
</script>